<template>
  <div>
       <h1 style="font-size: 35px;margin-bottom: 50px;font-weight: 200;">商品管理 -- 编辑商品</h1>
    <p>
      商品名称
      <el-input v-model="name" placeholder="请输入商品名称"></el-input>
    </p>
    <p>
      商品描述
      <el-input v-model="title" placeholder="请输入商品描述"></el-input>
    </p>
    <p>
      所属分类
      <!-- <el-select v-model="cat1" placeholder="请选择一级品类" @change="valueId(value1)">
        <el-option :label="" :value=""></el-option>
      </el-select>
      <el-select v-model="cat2" placeholder="请选择二级品类">
        <el-option :label="" :value=""></el-option></el-select> -->
    </p>
    <p>
      商品价格
      <el-input-number v-model="price" controls-position="right" :min="1" :max="10"></el-input-number>
    </p>
    <p>
      商品库存
      <el-input-number v-model="stort" controls-position="right" :min="1" :max="10"></el-input-number>
    </p>
    <p><h5>商品图片 </h5>
    <el-upload
        class="upload-demo"
        action="/api/manage/product/upload.do"
        :on-preview="handlePreview"
         v-model="img"
        multiple
        name="upload_file"
        :limit="3"
      >
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload> 
    <p>
      <quill-editor
        class="editor"
        ref="myTextEditor"
        v-model="con"
        :options="editorOption"
        @blur="onEditorBlur($event)"
        @focus="onEditorFocus($event)"
        @ready="onEditorReady($event)"
        @change="onEditorChange($event)"
        :on-success="l"
      ></quill-editor>
    </p>
    <p style="margin-top: 100px;"><el-button style="background-color: #337ab7;color: white;font-weight: bold;" @click="add">修改</el-button></p>

  </div>
</template>

<script>
import { toGoodsDetails } from '@/utils/api';
import { editGoods } from '@/utils/api';

export default {
  data() {
    return {
      list: [],
      cat1: '',
      id: this.$route.query.id,
      cat2: '',
      sta: '',
      name: '',
      title: '',
      categoryId:0,
      price: 0,
      stort: 0,
      status:"0",
      con:'',
      img:'',
      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
            ['blockquote', 'code-block'], // 引用  代码块
            [{ header: 1 }, { header: 2 }], // 1、2 级标题
            [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
            [{ script: 'sub' }, { script: 'super' }], // 上标/下标
            [{ indent: '-1' }, { indent: '+1' }], // 缩进
            // [{'direction': 'rtl'}],                         // 文本方向
            [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
            [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
            [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
            [{ font: [] }], // 字体种类
            [{ align: [] }], // 对齐方式
            ['clean'], // 清除文本格式
            ['link', 'image', 'video'] // 链接、图片、视频
          ] //工具菜单栏配置
        },
        placeholder: '请在这里添加产品描述', //提示
        readyOnly: false, //是否只读
        theme: 'snow', //主题 snow/bubble
        syntax: true //语法检测
      }
    };
  },
  methods: {
    l(val){
      console.log(val)
    },

  handlePreview(res) {
    this.img=res.res.data.uri
    console.log(res);
  },
    add(){
      editGoods(this.categoryId,this.name,this.title,this.img,this.con,this.price,this.stort,this.status,this.id).then(res=>{
        console.log(res);
        if(res.data.status==0){
          alert(res.data.data);
          this.$router.push('/goods')
        }else{
          alert('修改失败')
        }
      })
    },
    // 失去焦点
    onEditorBlur(editor) {},
    // 获得焦点
    onEditorFocus(editor) {},
    // 开始
    onEditorReady(editor) {},
    // 值发生变化
    onEditorChange(editor) {
      this.content = editor.html;
      // console.log(editor);
    },
  },
  mounted() {
    toGoodsDetails(this.id).then(res => {
      this.list = res.data.data;
      console.log(this.list)
      this.name = this.list.name;
      this.title = this.list.subtitle;
      this.price = this.list.price;
      this.stort = this.list.stock;
      this.categoryId = this.list.categoryId;
      this.cat2 = this.list.parentCategoryId;
      this.status=this.list.status
      this.con=this.list.detail
      this.img=this.list.subImages
      if (this.list.status == 1) {
        this.sta = '在售';
      } else {
        this.sta = '已下架';
      }
    });
  }
};
</script>

<style scoped>
.el-input {
  width: 400px;
  margin-left: 30px;
}
p {
  margin-top: 20px;
}
.el-select {
  margin-left: 30px;
}
.el-input-number {
  margin-left: 30px;
}
.editor {
  line-height: normal !important;
  height: 300px;
}

</style>
